<!DOCTYPE html>
<html lang="EN">
<head>
    <meta charset="UTF-8">
    <title>sharelords-在线编程</title>
    <script type="text/javascript" src="./static/js/jquery-1.12.3.min.js"></script>
</head>
<style type="text/css">
    body {
        padding: 0.5rem;
        background-color: #3bb2df;
        font-size: 1.5rem;
    }

    /* 按钮样式 */
    .button {
        font-size: 2.5rem;
        padding: 0.5rem;
        margin: 0.2rem;
    }

    /* placeholder样式设置 */
    textarea::-webkit-input-placeholder {
        color: orangered;
        font-size: 2rem;
    }

    /* 左悬浮 */
    .float-left {
        float: left;
    }

    /* 右对齐（需配合左悬浮使用）*/
    .float-right {
        float: right;
    }

    /* 标题 */
    .title {
        padding: 1rem;
        color: darkgreen;
        font-size: 2rem;
    }

    /* 文本域 */
    .fileInputArea, .resultViewArea {
        width: -webkit-fill-available;
        white-space: nowrap;
        border: solid black 1px;
        padding: 0.5rem;
        background-color: #C7EDCC;
    }

    /* 资源文件文本域 */
    .fileInputArea {
        height: 66rem;
    }

    /* 结果文本域 */
    .resultViewArea {
        height: 15rem;
        margin-top: 1rem;
    }

    /* 悬浮的字体大小设置区域 */
    .float-font-size-set-div {
        position: fixed;
        top: 6rem;
        right: 1rem;
        border: solid black 1px;
        background-color: #b9afab;
        height: 2.5rem;
    }

    .float-font-size-set-div select {
        height: 100%;
        width: 3.5rem;
        font-size: 1.5rem;
    }
</style>
<script>
    // 使textarea支持tab缩进
    // 用于替换tab键功能（这里用4个空格）
    var tabExchangeElem = '    ';
    $(document).ready(function () {
        $("textarea").on('keydown', function (e) {
            if (e.which === 9) {
                e.preventDefault();
                var start = this.selectionStart;
                var end = this.selectionEnd;
                var selected = window.getSelection().toString();
                selected = tabExchangeElem + selected.replace(/\n/g, '\n' + tabExchangeElem);
                this.value = this.value.substring(0, start) + selected + this.value.substring(end);
                this.setSelectionRange(start + tabExchangeElem.length, start + selected.length);
            }
        })
    });
</script>
<script type="text/javascript">
    function insertAtCursor(myField, myValue) {
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        } else if (myField.selectionStart || myField.selectionStart === '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var restoreTop = myField.scrollTop;
            myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
            if (restoreTop > 0) {
                myField.scrollTop = restoreTop;
            }
            myField.focus();
            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }
</script>
<script>
    // 默认含main主函数的class骨架
    var defaultClassSkeleton = "import java.util.*;\n" +
        "\n" +
        "public class Main {\n" +
        "\n" +
        "    public static void main(String[] args) {\n" +
        "        // TODO\n" +
        "        \n" +
        "    }\n" +
        "}";

    // 包名
    var classPackageClaim = "package com.sharelords;\n\n";

    // 打印语句
    var systemOutPrint = "System.out.println(\"\");";
</script>
<script>
    $(document).ready(function () {
        // 初始化
        init();

        // 程序运行
        $("#execute").click(function () {
            executeICP();
        });

        // 重写代码
        $("#init").click(function () {
            init();
        });

        // 增加包名
        $("#addClassPackage").click(function () {
            $("#mainFileSrc").val(classPackageClaim + $("#mainFileSrc").val());
        });

        // 增加打印语句
        $("#addSystemOutPrint").click(function () {
            insertAtCursor(document.getElementById("mainFileSrc"), systemOutPrint);
        });

        // textArea字体大小设置
        $("#fontSizeSelect").change(function () {
            changeTextAreaFontSize($("#fontSizeSelect option:selected").val());
        });
    });
</script>
<script>
    // 页面初始化
    function init() {
        $("#mainFileSrc").val(defaultClassSkeleton);
        changeTextAreaFontSize($("#fontSizeSelect option:selected").val());
    }

    // 提交(5s内最多允许提交一次)
    var isRepeatableOpera = false;

    function executeICP() {
        if (isRepeatableOpera) {
            alert("5s内最多只能运行一次");
            return;
        }

        isRepeatableOpera = true;
        setTimeout(function () {
            isRepeatableOpera = false;
        }, 5000);

        // 清空结果
        $("#executeResult").val("");

        // 执行程序运行
        var params = {
            "fileSrc": $("#mainFileSrc").val()
        }
        $.post("./execute/main", params, mainCallback);
    }

    /* 程序执行后的回调 */
    function mainCallback(data) {
        if (data.returnCode !== 0) {
            document.getElementById("executeResult").style.color = 'red';
        }

        $("#executeResult").val(data.result);
    }

    /* 改变textArea的字体大小 */
    function changeTextAreaFontSize(fontSize) {
        document.getElementById("mainFileSrc").style.fontSize = fontSize;
        document.getElementById("executeResult").style.fontSize = fontSize;
    }
</script>
<body>
<div class="title">
    <div class="float-left">sharelords-JAVA在线编程系统(基础版)</div>
    <div class="float-right">龙少出品，必属精品!</div>
</div>
<div style="margin-top: 3rem;">
    <textarea id="mainFileSrc" class="fileInputArea"></textarea>
</div>
<div class="float-left">
    <input class="button" id="addClassPackage" type="button" value="增加包名">
    <input class="button" id="addSystemOutPrint" type="button" value="增加打印语句">
</div>
<div class="float-right">
    <input class="button" id="init" type="button" value="重写代码">
    <input class="button" id="execute" type="button" value="运行程序">
</div>
<div>
    <textarea id="executeResult" class="resultViewArea" placeholder="运行结果展示区"></textarea>
</div>

<!-- 悬浮的字体大小选择器 -->
<div class="float-font-size-set-div">
    <span>字体大小设置</span>
    <select id="fontSizeSelect">
        <option value="20px">10</option>
        <option value="24px">12</option>
        <option value="28px" selected="selected">14</option>
        <option value="32px">16</option>
        <option value="40px">20</option>
        <option value="48px">24</option>
        <option value="56px">28</option>
    </select>
</div>
<div style="color: red;">
    1. 暂不支持System.in输入;<br/>
    2. 当前仅支持main主函数运行;<br/>
    3. main所在class加不加Package包名没影响;<br/>
    4. 支持内部类和方法相互调用;<br/>
    5. 后期将提供多个class文件的顺序调用;<br/>
    6. 仅供学习使用, 不喜勿碰, 谢谢合作.
</div>
</body>
</html>